<template>
  <div class="coupon-container">
    <!-- head return-->
    <van-nav-bar title="优惠券" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="black" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>

    <div class="coupon-list-box">
      <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons" @change="onChange" @exchange="onExchange" />
    </div>
  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '满减券',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
}
export default {
  name: 'Coupon',
  data() {
    return {
      chosenCoupon: -1,
      coupons: [],
      disabledCoupons: []
    }
  },
  methods: {
    // 选择优惠券
    onChange(index) {
      this.chosenCoupon = index
    },
    // 兑换优惠券
    onExchange(code) {
      this.coupons.push(coupon)
    }
  }
}
</script>

<style lang="less" scoped>
.coupon-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}
.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

.coupon-list-box {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 46px;
  width: 100%;
  .van-coupon-list {
    overflow: hidden;
    width: 97%;
    border-radius: 9px;
    /deep/ .van-button__text {
      color: #ffbf05;
    }
    /deep/ .van-tabs__line {
      background-color: #ffbf05;
    }
    /deep/ .van-coupon__head {
      color: #ffbf05;
    }
    /deep/ .van-checkbox__icon--checked .van-icon {
      display: none;
      border: none;
      background-color: #ffbf05;
    }
    /deep/ .van-icon-success {
      border: none;
    }
  }
  /deep/ .van-coupon-list__bottom {
    display: none;
  }
}
</style>
